适当减少手机使用,有助于视力保护... 新的一年祝您:身体健康,阖家欢乐!~~

js引入方式 elementplus 图标的使用

浏览量:176 作者:admin 类别:: 学习小记 更新时间:2024-05-31 10:54:49

按照文档学习过程中,结合文心一言等工具,得到的代码,可能由于文档理解不够,盲信AI工具,图标只显示空白大小有占位不显示图标。

由于是初学,并不想使用,npm等包管理工具,个人喜欢js引入的方式,来集成到项目中。

 

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Element Plus Icon Example</title>  
    
    <link href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.7.0/index.css" rel="stylesheet">    
    
    
    
</head>  
<body>  
    <div id="app" style="margin:50px 0 0 150px;    ">  
        
    <el-icon :size="50" :color="blue">
      <Edit />
    </el-icon>
    <!-- 或者独立使用它,不从父级获取属性 -->
    <el-button type="primary">
        <el-icon :size="20" :color="blue">
      <Search />
    </el-icon>
    <span>搜索</span>
    </el-button>
    
  </div>   
    
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.0/vue.global.prod.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.7.0/index.full.min.js"></script>  
      <script src="icon-vue.js"></script>    <!-- 使用图标,必须引入 icons-vue js文件 -->
    <script>  
        
        const app = Vue.createApp({});
        
        const {IconsVue} = ElementPlus
        //注册ElementPlus 插件 到vue
        app.use(ElementPlus);
        
        // console.log(typeof(ElementPlusIconsVue), ElementPlusIconsVue) // 用于检查图标 对象 属性
        
        //注册图标组件到vue
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            
          console.log('注册组件:', key, typeof(component));
          app.component(key, component);
        }
        //
        
        app.mount('#app');  
    
    </script> 
</body>  
</html>

 

关于博主
北京南城网络及弱电【张工】为您提供:
校园网、楼宇、村镇、园区,光纤网络覆盖,无线覆盖 华为|H3c|锐捷|爱快|panabit等品牌,路由、交换机、AC、AP 无源光网络(PON)设备,布署、调试、维运,等服务...
应急/临时光纤熔接...[藤仓22S]
博文为学习python所写:内容摘自网络、学习笔记、记事备忘。
QQ:872876353,欢迎交流学习、加Q注明来意。

诗文鉴赏

《满江红》· 岳飞
落星侵晓没,
残月半山低。
怒发冲冠,
凭栏处、潇潇雨歇。
抬望眼、仰天长啸,壮怀激烈。
三十功名尘与土,八千里路云和月。
莫等闲、白了少年头,
空悲切。
源于生活-记录日常
The site based on python 3 with flask...